<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微服务认证中心 - 授权确认</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .consent-container {
            width: 500px;
            padding: 30px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .consent-header {
            text-align: center;
            margin-bottom: 25px;
        }
        .consent-header h2 {
            color: #3c4858;
            font-weight: 600;
        }
        .client-info {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        .scope-list {
            margin: 20px 0;
        }
        .scope-item {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        .scope-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        .consent-footer {
            text-align: center;
            margin-top: 20px;
            color: #6c757d;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="consent-container">
        <div class="consent-header">
            <h2>授权请求</h2>
            <p class="text-muted">应用程序请求访问您的账户</p>
        </div>
        
        <div class="client-info">
            <h4 th:text="${clientId}">应用名称</h4>
            <p>请求获取以下权限：</p>
        </div>
        
        <div class="scope-list">
            <div class="scope-item" th:each="scope : ${scopes}">
                <div class="d-flex align-items-center">
                    <svg class="scope-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <strong th:text="${scope}">权限范围</strong>
                        <p class="mb-0 text-muted" th:text="${scopeDescriptions.get(scope)}">权限说明</p>
                    </div>
                </div>
            </div>
        </div>
        
        <form th:action="@{/oauth2/authorize}" method="post">
            <input type="hidden" name="client_id" th:value="${clientId}">
            <input type="hidden" name="state" th:value="${state}">
            
            <div class="button-group">
                <button class="btn btn-secondary" type="submit" name="consent" value="cancel">拒绝</button>
                <button class="btn btn-primary" type="submit" name="consent" value="approve">授权</button>
            </div>
        </form>
        
        <div class="consent-footer">
            <p>授权后，您可以随时在账户设置中撤销此应用的访问权限</p>
            <p>版权所有 &copy; <span th:text="${year}">2024</span> 微服务项目组</p>
        </div>
    </div>
</body>
</html> 